import React from 'react';

// import { Button } from 'antd'
// import 'antd/dist/antd.css'

import { Button,List} from 'antd-mobile';

class Camp extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            status: 'normal',
            solders: ['胡子','竹子','兰花']
        };
        this.addSolderClickHandler = this.addSolderClickHandler.bind(this);
    }
    componentWillMount() {
        console.log('willmount'+'组件将要加载')
    }

    addSolderClickHandler() {
        console.log('开始添丁啦');
        this.setState({
            solders:[...this.state.solders,'二牛'+Math.random()*100]
        });

    }
    fightWarHandler() {
        console.log('war start');
        this.setState({
            status: 'fight'
        })
    }
    //绑定this：通过直接定义箭头函数来绑定this
    stopFightHandler = () => {
        console.log('war stop');
        this.setState({
            status: 'Peace'
        })
    }
    render() {
        const status = this.state.status;
        const boss= this.props.boss;
        const department = this.props.department;
        console.log('render:组件开始绘制')
        return(
            <div>
                <h5>{department} 营长 {boss}</h5>

                <Button type = "primary" onClick={this.addSolderClickHandler}>新兵入伍</Button>
                {/*箭头函数绑定this*/}
                <Button type="warning" onClick={() => this.fightWarHandler()}>{status}</Button>
                <List
                    renderHeader={()=>'士兵名单'}
                >
                    {
                        this.state.solders.map(name =>{
                            return (
                                <List.Item key={name}>
                                    {name}
                                </List.Item>
                            )
                        })
                    }
                </List>
            </div>

        )
    }
    componentDidMount() {
        console.log('组件挂载完毕')
    }
    componentWillReceiveProps() {
        console.log('组件即将接收父组件的值了')
    }
    shouldComponentUpdate() {
        console.log('判断组件是不是需要更新');
        return true;
    }
    componentWillUpdate() {
        console.log('组件即将更新了')
    }
    componentDidUpdate() {
        console.log('组件更新完毕')
    }
    componentwillUnMount() {
        console.log('组件开始消亡了')
    }
}

class App extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            departments:[
                '1营',
                '2营',
                '3营'
            ]

        }
    }
    changeZheFaHandler= () => {
        this.setState({
            departments:this.state.departments.reverse()
        })

    }
    render() {
        const boss = '李云龙';
        const departments = this.state.departments;

        return(
            <div>
               <h1>
                   独立团 团长:<span style={{color:"#6688ff",fontSize: 16}}>{boss}</span>
               </h1>
                <button onClick={this.changeZheFaHandler}>八卦阵</button>
               <Camp  boss = '马大帅' department = {departments[1]}/>
               <Camp  boss = '小死样' department = {departments[2]} />
            </div>
        )
    }
}

export default App;